<template>
  <div>
    <my-header
      ><el-breadcrumb-item>废品管理</el-breadcrumb-item>
      <el-breadcrumb-item>废品列表</el-breadcrumb-item></my-header
    >

    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="7">
          <!-- 日期选择框 -->
          <el-date-picker
            v-model="dateValue"
            type="date"
            placeholder="请选择日期"
            size="large"
            value-format="YYYY-MM-DD"
            clearable
            @change="onSearchList"
            @handleClose="getWasteList"
          />
        </el-col>
        <!-- 分类选择框 -->
        <el-col :span="13">
          <el-select
            v-model="cateValue"
            class="m-2"
            placeholder="请选择废品分类"
            clearable
            @change="onCateFilter"
            @clear="getWasteList"
          >
            <el-option
              v-for="item in list"
              :key="item.id"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-col>
      </el-row>

      <!-- 废品列表区域 -->
      <el-table :data="wastelist" style="width: 100%" border stripe>
        <!-- 索引列 -->
        <el-table-column type="index"></el-table-column>
        <el-table-column label="废品名称">
          <template #default>
            <!-- {{ scope.row }} -->
            {{ wasteName }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" sortable></el-table-column>
        <el-table-column prop="time" label="修改时间" sortable></el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        :page-sizes="[1, 2, 5, 10]"
        small="small"
        background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="wastelist.length"
      />
    </el-card>

    <!-- 修改废品事件的对话框 -->
    <el-dialog v-model="editDialogVisible" title="修改废品" width="50%" @close="editDialogClosed">
      <!-- 内容主体区域 -->
      <el-form
        ref="editFormRef"
        :model="editForm"
        status-icon
        :rules="editFormRules"
        label-width="70px"
      >
        <el-form-item label="废品名称" prop="name">
          <el-input v-model="editForm.name" disabled />
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="editForm.price" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="editForm.remark" />
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="editWasteInfo">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { WastePrice } from '../../api/waste.js'
export default {
  data() {
    return {
      dateValue: '',
      cateValue: '金属',
      list: [
        { id: 1, label: '金属', value: 1 },
        { id: 2, label: '塑料', value: 2 },
        { id: 3, label: '纸皮', value: 3 },
        { id: 4, label: '电子产品', value: 4 }
      ],
      wastelist: [],
      wasteName: '金属'
    }
  },
  created() {
    this.getWasteList()
  },
  methods: {
    onSearchList() {
      this.wastelist = this.wastelist.filter((item) => item.time.includes(this.dateValue))
    },
    // 选择分类框变化时
    async onCateFilter(id) {
      this.wastelist = []
      const { data: res } = await WastePrice(id)
      if (res.code === 1) {
        const time = res.data.time
        const price = res.data.price
        for (const i in time) {
          const obj = {
            price: price[i],
            time: time[i]
          }
          this.wastelist.push(obj)
        }
        this.wasteName = this.list[id - 1].label
      } else {
        return this.$message.error('获取该废品分类失败！')
      }
    },
    // 初始第一个分类
    async getWasteList() {
      this.wastelist = []
      const { data: res } = await WastePrice(1)
      if (res.code === 1) {
        const time = res.data.time
        const price = res.data.price
        for (const i in time) {
          const obj = {
            price: price[i],
            time: time[i]
          }
          this.wastelist.push(obj)
        }
      } else {
        return this.$message.error('获取该废品分类失败！')
      }
    },
    // 分类选择框变化时
    async getList(id) {
      this.wastelist = []
      const { data: res } = await WastePrice(id)
      if (res.code === 1) {
        const time = res.data.time
        const price = res.data.price
        for (const i in time) {
          const obj = {
            price: price[i],
            time: time[i]
          }
          this.wastelist.push(obj)
        }
      } else {
        return this.$message.error('获取该废品分类失败！')
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
